<template>
  <div>
    <PageList>
      <template #header>隧道示意图</template>
      <template #table>
        <ul class="topUl">
          <li class="liTitle">
            <span class="label">区域</span>
            <span class="value">人数</span>
          </li>
          <li v-for="areaItem in areaList" :key="areaItem.name" class="liTitle" :class="false ? 'red' : ''">
            <span :class="areaItem.limitation > areaItem.value ? 'lime' : 'red'" class="label">{{ areaItem.name }}</span>
            <span :class="areaItem.limitation > areaItem.value ? 'lime' : 'red'" class="value">{{ areaItem.value }}</span>
          </li>
        </ul>
        <div v-if="mapSwait" class="mapBox">
          <img v-if="imgSrc" class="mapImg" :src="imgSrc" alt />
          <!-- <div class="divdiv">348</div> -->
          <!-- 监控设备 -->
          <el-popover
            v-for="cameraItem in videoList"
            :key="cameraItem.id"
            placement="top-start"
            class="cameraItem"
            :style="{ left: cameraItem.x + 'px', top: cameraItem.y + 'px' }"
            trigger="hover"
          >
            <div class="labelDiv">
              <span class="shallow">监控名称:</span>
              <span class="deep">{{ cameraItem.name }}</span>
            </div>
            <div class="labelDiv">
              <span class="shallow">区域:</span>
              <span class="deep">{{ cameraItem.area ? cameraItem.area.name : '无' }}</span>
            </div>
            <img slot="reference" :src="iconData[1].value" alt="监控" @click="openVideoHandler(cameraItem)" />
          </el-popover>
          <!-- 基站覆盖范围 -->
          <div
            v-for="item in baseStationList"
            :key="item.name"
            :style="{ width: item.maxDist + 'px', height: item.maxDist + 'px', left: item.x - (item.maxDist / 2) + 'px', top: item.y - (item.maxDist / 2) + 'px' }"
            class="range"
          >
            <!-- 基站位置 -->
            <el-popover placement="top-start" class="up" :style="{ left: (item.maxDist / 2) + 'px', top: (item.maxDist / 2) + 'px' }" trigger="hover">
              <div class="labelDiv">
                <span class="shallow">基站名称:</span>
                <span class="deep">{{ item.name }}</span>
              </div>
              <div class="labelDiv">
                <span class="shallow">基站类型:</span>
                <span class="deep">{{ item.siteType }}</span>
              </div>
              <div class="labelDiv">
                <span class="shallow">区域:</span>
                <span class="deep">{{ item.areaName }}</span>
              </div>
              <div class="labelDiv">
                <span class="shallow">考勤机站:</span>
                <span class="deep">{{ item.isForWorkCheck ? '是' : '否' }}</span>
              </div>
              <img slot="reference" :src="iconData[0].value" alt="基站" />
            </el-popover>
            <!-- 施工队员位置 -->
            <el-popover
              v-for="li in item.arr"
              :key="li.id"
              placement="top-start"
              class="people"
              :style="{ left: item.x - (item.maxDist / 2) < 0 ? (item.maxDist / 2) + li.left + 'px' : item.x + item.maxDist < 828 ? (item.maxDist / 2) + li.left + 'px' : li.left > (item.maxDist / 2) ? li.left - (item.maxDist / 2) + 'px' : li.left + 'px', top: item.y - (item.maxDist / 2) < 0 ? (item.maxDist / 2) + li.top + 'px' : item.y + item.maxDist < 617 ? li.top + 'px' : li.top > (item.maxDist / 2) ? li.top - (item.maxDist / 2) + 'px' : li.top + 'px' }"
              trigger="hover"
            >
              <div class="labelDiv">
                <span class="shallow">人员名称:</span>
                <span class="deep">{{ li.name }}</span>
              </div>
              <div class="labelDiv">
                <span class="shallow">RFID卡:</span>
                <span class="deep">{{ li.rfid }}</span>
              </div>
              <div class="labelDiv">
                <span class="shallow">联系方式:</span>
                <span class="deep">{{ li.phone }}</span>
              </div>
              <div class="labelDiv">
                <span class="shallow">是否在职:</span>
                <span class="deep">{{ li.status ? '是' : '否' }}</span>
              </div>
              <img slot="reference" :src="iconData[2].value" alt="施工队员" />
            </el-popover>
            <!-- 车辆位置 -->
            <el-popover
              v-for="carItem in item.carArr"
              :key="carItem.id"
              placement="top-start"
              class="people"
              :style="{ left: item.x - (item.maxDist / 2) < 0 ? (item.maxDist / 2) + carItem.left + 'px' : item.x + item.maxDist < 828 ? (item.maxDist / 2) + carItem.left + 'px' : carItem.left > (item.maxDist / 2) ? carItem.left - (item.maxDist / 2) + 'px' : carItem.left + 'px', top: item.y - (item.maxDist / 2) < 0 ? (item.maxDist / 2) + carItem.top + 'px' : item.y + item.maxDist < 617 ? carItem.top + 'px' : carItem.top > (item.maxDist / 2) ? carItem.top - (item.maxDist / 2) + 'px' : carItem.top + 'px' }"
              trigger="hover"
            >
              <div class="labelDiv">
                <span class="shallow">负责人:</span>
                <span class="deep">{{ carItem.propleName }}</span>
              </div>
              <div class="labelDiv">
                <span class="shallow">联系方式:</span>
                <span class="deep">{{ carItem.proplePhone }}</span>
              </div>
              <div class="labelDiv">
                <span class="shallow">RFID卡:</span>
                <span class="deep">{{ carItem.rfid }}</span>
              </div>
              <div class="labelDiv">
                <span class="shallow">车辆类型:</span>
                <span class="deep">{{ carItem.name }}</span>
              </div>
              <div class="labelDiv">
                <span class="shallow">车牌号:</span>
                <span class="deep">{{ carItem.plateNumber }}</span>
              </div>
              <img slot="reference" :src="iconData[3].value" alt="车辆" />
            </el-popover>
          </div>
        </div>
      </template>
    </PageList>
    <videoDialog ref="videoDialog"></videoDialog>
  </div>
</template>
<script>
  import { assetsImages } from '@/utils/images'
  import listMixin from '@/mixins/list'
  import videoDialog from './components/videoDialog'
  import { tunnelRealTime, tunnel, parameter, area } from '@/api/api'
  export default {
    components: {
      videoDialog,
    },
    mixins: [listMixin],
    data() {
      return {
        // 获取图片地址
        imgUrl: this.$imgUrl + '/',
        imgSrc: '',
        // 地图：单洞
        singleHole: assetsImages.singleHole,
        // 地图：双洞
        doubleHole: assetsImages.doubleHole,
        // 表单数据
        iconData: [
          { name: 'BaseStationImage', value: '', id: null },  // 基站
          { name: 'MonitorImage', value: '', id: null }, // 监控
          { name: 'PeopleImage', value: '', id: null }, // 人员
          { name: 'CarImage', value: '', id: null } // 车辆
        ],
        // 传感器图片
        // people: assetsImages.people,
        mapSwait: false,
        // 监控数组
        videoList: [],
        // 传感器数组
        sensor: [],
        // 基站数组
        baseStationList: [],
        // 区域数组
        areaList: [],
        // 出基站
        outSite: [],
        // 定时器ID
        timeId: '',
        // 最大值
        maxDist: 0
      }
    },
    mounted() {
      // this.getMap()
      this.getArea()
      this.getTunnelData()
      this.buildLocation()
      this.timeId = setInterval(() => {
        this.buildLocation()
      }, 1000 * 10)
    },
    beforeDestroy() {
      clearInterval(this.timeId)
    },
    methods: {
      // 获取所有区域
      async getArea() {
        try {
          let obj = { pageIndex: 1, pageSize: 1e8 }
          let { data: { items } } = await area('post', obj, false)
          this.tableData = []
          this.areaList = items.map(item => {
            return {
              name: item.name,
              value: 0,
              id: item.id,
              limitation: Number(item.limitation)
            }
          })
        } catch (err) {
          console.log(err)
        }
      },
      // 获取图标数据
      async getTunnelData() {
        try {
          let response = await Promise.allSettled([
            parameter('get', { parameterName: 'BaseStationImage' }),
            parameter('get', { parameterName: 'MonitorImage' }),
            parameter('get', { parameterName: 'CarImage' }),
            parameter('get', { parameterName: 'PeopleImage' })
          ])

          response.forEach(item => {
            this.iconData.forEach(edit => {
              let obj = item.value.data
              if (edit.name === obj.name) {
                edit.value = obj.value
                edit.id = obj.id
              }
            })
          })
        } catch (err) {
          // 基站图片
          this.iconData[0].value = assetsImages.baseStation
          // 监控设备
          this.iconData[1].value = assetsImages.camera
          // 施工队员图片
          this.iconData[2].value = assetsImages.people
          // 车辆图片
          this.iconData[3].value = assetsImages.car
          console.log(err)
        }
      },
      openVideoHandler(item) {
        this.$refs['videoDialog'].open(item)
      },
      // 处理地图
      handleMap(value) {
        try {
          if (value.backedImageName) {
            this.imgSrc = this.imgUrl + value.backedImageName
          } else {
            if (value.templateName === '单洞') {
              this.imgSrc = assetsImages.singleHole
            } else if (value.templateName === '双洞') {
              this.imgSrc = assetsImages.doubleHole
            }
          }
        } catch (err) {
          console.log(err)
        }
      },
      handleBaseStation(value) {
        // 获取基站区域
        this.baseStationList = value.map(item => {
          if (item.lenght === 0) { return }
          if (item.area) {
            this.areaList.forEach(area => {
              if (area.name === item.area.name) {
                area.value = item.cars.length + item.realtimeLocationViews.length
              }
            })
          }
        })
        // 获取基站数据
        this.baseStationList = value.map(item => {
          if (item.lenght === 0) { return }
          return {
            name: item.name,
            x: item.xPosition,
            y: item.yPosition,
            areaName: item.area ? item.area.name : '无',
            siteType: item.siteType === 1 ? '进基站' : item.siteType === 2 ? '出基站' : '其它基站',
            isForWorkCheck: item.isForWorkCheck,
            // 车辆位置数据
            carList: item.cars,
            // 人员位置数据
            propleList: item.realtimeLocationViews,
            arr: [], carArr: []
          }
        })
        // 获取基站内人员位置
        this.baseStationList.forEach(item => {
          let num = 10
          if (item.propleList.length > 0) {
            item.arr = item.propleList.map(edit => {
              return {
                id: edit.id,
                name: edit.employee.name,
                rfid: edit.employee.rfid,
                phone: edit.employee.phone,
                status: edit.employee.status,
                left: this.random(0, (num * 10 + 10) * 2),
                top: this.random(0, (num * 10 + 10) * 2)
              }
            })
          }

          // 获取基站内车辆位置
          let carNum = 10
          item.carArr = item.carList.map(car => {
            return {
              id: car.id,
              name: car.carType,
              rfid: car.rfid,
              propleName: car.responsibleMan,
              proplePhone: car.responsiblePhone,
              plateNumber: car.plateNumber,
              left: this.random(0, (carNum * 10 + 10) * 2),
              top: this.random(0, (carNum * 10 + 10) * 2)
            }
          })
          // 得到基站范围边长
          item.maxDist = (num > carNum ? num * 10 + 10 : carNum * 10 + 10) * 2
        })
      },
      handleVedioData(value) {
        if (value.lenght === 0) { return }
        this.videoList = value.map(item => {
          return item
        })
      },
      // 得到随机位置
      async buildLocation() {
        try {
          let resList = await tunnelRealTime()
          // 处理地图
          this.handleMap(resList.data.tunnel)
          // 处理基站数据
          this.handleBaseStation(resList.data.baseStation)
          // 处理监控数据
          this.handleVedioData(resList.data.videos)
          this.mapSwait = true
          // 传感器
          // if (resList[2].code === 200) {
          //   this.sensor = resList[2].data.items.map(item => {
          //     if (item.lenght === 0) { return }
          //     return {
          //       label: item.workName,
          //       value: item.id
          //     }
          //   })
          // }
        } catch (err) {
          console.log(err)
        }
      },
      // 取随机数
      random(min, max) {
        return Math.floor(Math.random() * (max - min + 1) + min)
      },
    }
  }
</script>
<style lang="scss" scoped>
  .labelDiv {
    display: flex;
    .deep {
      color: #000;
      width: 120px;
      text-align: left;
    }
    .shallow {
      padding-right: 10px;
      color: #666;
      width: 70px;
      text-align: right;
    }
  }
  ul,
  li {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .topUl {
    width: 500px;
    border: 1px solid #ccc;
    border-bottom: none;

    .liTitle {
      width: 100%;
      display: flex;
      color: #666;
      border-bottom: 1px solid #ccc;

      .label {
        flex: 1;
        display: flex;
        padding: 10px 0;
        align-items: center;
        justify-content: center;
        border-right: 1px solid #ccc;
      }
      .value {
        flex: 1;
        display: flex;
        padding: 10px 0;
        align-items: center;
        justify-content: center;
      }
    }

    .red {
      color: red;
      font-weight: 900;
    }

    .lime {
      color: lime;
      font-weight: 900;
    }
  }
  .mapBox {
    width: 828px;
    height: 617px;
    position: relative;
    margin-top: 20px;
    border: 1px solid #ccc;
    background-color: #ccc;

    // transform-style: preserve-3d;
    // transform: rotateY(50deg) rotateX(50deg);

    .labelDiv {
      .label {
        color: #000;
      }
      .value {
        color: #333;
      }
    }

    .mapImg {
      width: 100%;
      height: 100%;
    }

    .cameraItem {
      z-index: 100;
      width: 20px;
      height: 20px;
      left: 0;
      top: 0;
      border-radius: 50%;
      position: absolute;
      display: inline-block;
      background-color: #fff;
      img {
        width: 100%;
        height: 100%;
        float: left;
      }
    }

    .divdiv {
      width: 348px;
      height: 302px;
      position: absolute;
      left: 0;
      top: 0;
      background-color: #fff;
    }
    .divdivdiv {
      width: 400px;
      height: 300px;
      position: absolute;
      right: 0;
      top: 0;
      background-color: #fff;
    }
    .range {
      display: inline-block;
      position: absolute;
      // border: 1px solid lime;
      .up {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        position: absolute;
        display: inline-block;
        background-color: #fff;
        transform: translate(-50%, -50%);
        img {
          float: left;
          width: 100%;
          height: 100%;
        }
        // transform: rotateX(120deg) translateZ(220px) translateX(364PX);
        // .baseStation {
        // width: 60px;
        // height: 50px;
        // text-align: center;
        // line-height: 50px;
        // position: absolute;
        // background-color: #53868B;
        // transform: rotateX(180deg);
        // }
      }
      .people {
        width: 20px;
        height: 20px;
        position: absolute;
        border-radius: 50%;
        background-color: #fff;
        display: inline-block;
        transform: translate(-50%, -50%);
        img {
          width: 100%;
          height: 100%;
          float: left;
        }
      }
    }
  }
</style>
